<template>
	<div class="store">
		<div class="template" v-show="Loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>我的店铺</div>
			<div></div>
		</header>
		
		<div class="user">
			<div class="userimg">
				<img :src="userlist.userImg">
				<div>
					<p>{{userlist.userNickName}}</p>
					<p>{{userlist.inviteCode}}   <span class="tag-read" :data-clipboard-text="userlist.inviteCode" @click="copy">复制邀请码</span></p>
				</div>
			</div>
			<div class="seek" @click="seek"><img src="../assets/sousuo.png"></div>
		</div>
		
		<div class="statement">
			 <div class="statement_d">
			 	<div class="shop">店铺报表</div>
			 	<div class="examine" @click="mystatement">查看明细 > </div>
			 </div>
			 <div class="statement_d">
			 	<div>
			 		<div class="sum">
			 			<div>账户金额</div>
			 			<div>{{userlist.balcance}}</div>
			 		</div>
			 	</div>
			 	<div class="withdraw" @click="withdraw">提现</div>
			 </div>
			 <div class="statement_d"> 
			 	<div class="statement_d_u">
			 		<div>预估收益(元)</div>
			 		<div>{{userlist.preProfit}}</div>
			 	</div>
			 	<div class="statement_d_u">
			 		<div>累计收益(元)</div>
			 		<div>{{userlist.actualProfit}}</div>
			 	</div>
			 	<div class="statement_d_u">
			 		<div>付款订单(元)</div>
			 		<div>{{userlist.orderNum}}</div>
			 	</div>
			 </div>
		</div>
		
		<div class="title">
			<!--<div class="title_d">
				<img src="../assets/yaoqingruzhu.png">
				<div>邀请开店</div>
			</div>-->
			<div class="title_d" @click="invite">
				<img src="../assets/yaoqingVIP.png">
				<div>邀请记录</div>
			</div>
			<div class="title_d" @click="team"> 
				<img src="../assets/tuandui.png">
				<div>我的团队</div>
			</div>
		</div>
		
		<!--<div class="applyFor" @click="applyForon">申请小红柜合伙人</div>-->
		
		<div class="oddgodds">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" class="contentList">
				<li v-for='item in goodslist' v-if="item.spuPlatform == 'yh'" @click="yh(item.id)">
					<div class="oddgodds_d" >
						<div class="oddgodds_dimg"><img :src="item.mainImageUrl"></div>
						<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
						<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
						<i class="pddSymbol" v-if="item.spuPlatform == 'pdd'"></i>
						<i class=""></i>
						<div class="oddgodds_dname">
							<img src="../assets/jingxaun.png">
							{{item.goodsName}}</div>
						<div class="rawprice">￥{{item.price}}</div>
						<div class="oddgodds_d_u">
							<div class="drop">降{{item.couponMoney}}元</div>
							<div class="cashprice">￥{{item.conPrice}}</div>
						</div>
						<div class="robbuy">立即抢购</div>
					</div>
				</li>
				<li v-for='item in goodslist' v-if="item.spuPlatform == 'jd'" @click="jd(item.id,item.couponMoney)"> 
					<div class="oddgodds_d" >
						<div class="oddgodds_dimg"><img :src="item.mainImageUrl"></div>
						<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
						<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
						<i class="pddSymbol" v-if="item.spuPlatform == 'pdd'"></i>
						<i class=""></i>
						<div class="oddgodds_dname">
							<img src="../assets/jingxaun.png">
							{{item.goodsName}}</div>
						<div class="rawprice">￥{{item.price}}</div>
						<div class="oddgodds_d_u">
							<div class="drop">降{{item.couponMoney}}元</div>
							<div class="cashprice">￥{{item.conPrice}}</div>
						</div>
						<div class="robbuy">立即抢购</div>
					</div>
				</li>
				<li v-for='item in goodslist' v-if="item.spuPlatform == 'pdd'" @click="pdd(item.id)">
					<div class="oddgodds_d" >
						<div class="oddgodds_dimg"><img :src="item.mainImageUrl"></div>
						<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
						<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
						<i class="pddSymbol" v-if="item.spuPlatform == 'pdd'"></i>
						<i class=""></i>
						<div class="oddgodds_dname">
							<img src="../assets/jingxaun.png">
							{{item.goodsName}}</div>
						<div class="rawprice">￥{{item.price}}</div>
						<div class="oddgodds_d_u">
							<div class="drop">降{{item.couponMoney}}元</div>
							<div class="cashprice">￥{{item.conPrice}}</div>
						</div>
						<div class="robbuy">立即抢购</div>
					</div>
				</li>
			</ul>
		</div>
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	import Clipboard from 'clipboard';
	export default{
		data(){
			return{
				token:'',
				userlist:[],
				goodslist:[],
				loading:false,
				index:0,
				Loading:true,
			}
		},
		created(){
			this.token = localStorage.getItem('token');
			//我的店铺信息
			var url  = BaseUrl + 'users/yunindex?appId=wap'+ '&token=' + this.token;
			this.$http.post(url).then(res=>{
				this.Loading = false;
				if(res.data.code == '10000'){
					
					this.userlist = res.data.data;
				}else{
					Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					});
				}
			}).catch(error=>{
				this.Loading = false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
			this.singInfo(this.index);
		}, 
		methods:{
			//复制邀请码
			copy:function(){
		        var clipboard = new Clipboard('.tag-read')
		        clipboard.on('success', e => {
		          	Toast({
						message: '复制成功',
						position: 'middle',
						duration: 3000
					});
		          clipboard.destroy()
		        })
		        clipboard.on('error', e => {
		          	Toast({
						message: '该浏览器不支持自动复制',
						position: 'middle',
						duration: 3000
					});
		          clipboard.destroy()
		        })
			},
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			//搜素
			seek:function(){
				this.$router.push({
					path:'/seekgoods'
				})
			},
			singInfo(index){
//				this.Loading = true;
				//火爆商品
				var url = BaseUrl + 'users/hostGoods?token=' +this.token + '&appId=wap+&length=10&start=' + this.index;
				this.$http.post(url).then(res=>{
//					console.log(res.data.data);
					if(res.data.code == '10000'){
//						this.Loading = false;
						this.goodslist = this.goodslist.concat(res.data.data.list);
						if(res.data.data.isMore == "none") {
							this.loading = true;
							return;
						} else if(res.data.data.isMore == "have") {
							this.loading = false;
							this.index++;
						}
					}
				}).catch(error=>{
//				this.Loading = false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
				
			},
			loadMore() {
				this.loading = this.loading;
				if(this.loading == false){
					setTimeout(() => {
						this.singInfo(this.index);
						this.loading = this.loading;
					}, 3000);
				}
			},
			//提现
			withdraw:function(){
				this.$router.push({
					path:'/withdrawDeposit'
				})
			},
			//查看明细
			mystatement:function(){
				this.$router.push({
					path:'/mystatement'
				})
			},
//			//申请小红柜合伙人
//			applyForon:function(){
//				this.$router.push({
//					path:'/applyforpartner'
//				})
//			},
			//邀请记录
			invite:function(){
				this.$router.push({
					path:'/inviterecord'
				})
			},
			//我的团队
			team:function(){
				this.$router.push({
					path:'/myteam'
				})
			},
			//商品跳转
			jd:function(id, couponMoney){
				this.commodity(id, couponMoney);  //全局事件
			},
			yh:function(id){
				this.yhcommodity(id);// 全局事件
			},
			pdd:function(id){
				this.pddcommodity(id);//  全局事件
			}
		}
	}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		border-bottom: 1px solid #dcd2d1;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	
	.user{
		padding: 0.2rem 0.3rem 0 0.3rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.userimg{
		display: flex;
	}
	.userimg img{
		width: 0.98rem;
		height: 0.98rem;
		margin-right: 0.2rem;
		border-radius: 0.1rem;
	}
	.userimg div p{
		margin-top: 0.05rem;
	}
	.userimg div p:first-child{
		font-family: PingFangSC-Medium;
		font-size: 0.3rem;
		color: #333333;
		letter-spacing: 0;
	}
	.userimg div p:last-child{
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #ABABAB;
		letter-spacing: 0;
	}
	.seek{
		width: 0.37rem;
		height: 0.37rem;
	}
	.seek img{
		width: 100%;
		height: 100%;
	}
	.statement{
		margin: 0.53rem 0.3rem;
		padding: 0.15rem;
		background: linear-gradient(90deg,#FF4F68,#FF2040);
		border-radius: 0.1rem;
	}
	.statement_d{
		display: flex;
		justify-content:space-between;
		align-items: center;
	}
	.statement_d:nth-child(2){
		margin-top: 0.44rem;
	}
	.statement_d:nth-child(3){
		margin-top: 0.44rem;
		border-top: 1px solid #fff;
		padding-top: 0.2rem;
	}
	.shop{
		font-family: PingFangSC-Regular;
		font-size: 0.32rem;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	.examine{
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	.sum div:first-child{
		opacity: 0.6;
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	.sum div:last-child{
		font-family: PingFangSC-Medium;
		font-size: 0.6rem;
		color: #FFFFFF;
	}
	.withdraw{
		width: 1.28rem;
		height: 0.48rem;
		text-align: center;
		line-height: 0.48rem;
		border-radius: 0.2rem;
		border: 1px solid #fff;
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	.statement_d_u div:first-child{
		font-family: PingFangSC-Medium;
		font-size: 0.24rem;
		color: #FFFFFF;
		letter-spacing: 0;
		opacity: 0.6;
	}
	.statement_d_u div:last-child{
		font-family: PingFangSC-Medium;
		font-size: 0.4rem;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	.title{
		display: flex;
		justify-content:space-between;
		padding: 0.4rem 1.5rem;
		border-bottom: 1px solid #E3E3E3;
		margin-bottom: 0.2rem;
	}
	.title_d {
		text-align: center;
	}
	.title_d img{
		width: 0.44rem;
		height: 0.39rem;
	}
	.applyFor{
		margin: 0 0.3rem;
		background: linear-gradient(90deg,#FF4F68,#FF2040);
		font-family: PingFangSC-Regular;
		font-size: 0.28rem;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
		padding: 0.24rem 0;
		border-radius: 0.1rem;
		margin-bottom: 0.36rem;
	}
	.oddgodds ul{
		width: 100%;
		padding: 0 0.1rem;
		overflow-y: hidden;
		background: #F0F2F5;
	}
	.oddgodds_d:nth-child(odd){
		width: 48.42%;
		box-sizing: border-box;
		background: #fff;
		float: left;
		margin: 0.05rem 0.05rem;
	}
	.oddgodds_dimg{
		width: 100%;
		height: 3.49rem;
	}
	.oddgodds_dimg img{
		width: 100%;
		height: 100%;
	}
	.oddgodds_dname{
		height: 0.8rem;
		overflow: hidden;
	  	text-overflow:ellipsis;
	  	display: -webkit-box;
	  	-webkit-line-clamp: 2;
	  	-webkit-box-orient: vertical;
	  	padding: 0.05rem 0.1rem;
	  	font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #333333;
		letter-spacing: 0.28px;
		width: 100%;
	}
	.oddgodds_dname img{
		width: 0.6rem;
		height: 0.26rem;
	}
	.rawprice{
		font-family: PingFangSC-Regular;
		font-size: 0.2rem;
		color: #ABABAB;
		letter-spacing: 0;
		text-decoration: line-through;
		padding: 0.05rem 0.1rem;
	}
	.oddgodds_d_u{
		display: flex;
		justify-content: space-between;
		padding: 0.05rem 0.1rem;
	}
	.drop{
		font-family: PingFangSC-Regular;
		font-size: 0.22rem;
		color: #FF2040;
		letter-spacing: 0;
	}
	.cashprice{
		font-family: PingFangSC-Regular;
		font-size: 0.3rem;
		color: #FF2040;
		letter-spacing: 0;
	}
	.robbuy{
		margin: 0.1rem 0.1rem;
		background: #ff2040;
		color: #fff;
		text-align: center;
		padding: 0.1rem 0;
		border-radius: 0.4rem;
	}
	.jdSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/jd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.655rem;
		float: right;
	}
	.yhSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/yh.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.655rem;
		float: right;
	}
	.pddSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/pdd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.655rem;
		float: right;
	}
</style>
